import React, { Component } from 'react';
class Basic extends Component {
  constructor(props) {
    super(props);
    this.state = { 
      num: 0,
      list: []
    }
  }
  handChange=()=>{
    this.setState({
      num: this.state.num+1
    })
  }
  addList=()=>{
    var val = Math.random() * 10
    console.log(val);
    let obj = {
      title:Math.floor(val)
    }
    this.setState({
      list:[...this.state.list,obj]
    })
  }
  componentDidMount() {
    console.log(`你点击了${this.state.num} 次`);
  }
  componentDidUpdate() {
    console.log(`你更新了${this.state.num} 次`);
  }
  render() { 
    return ( 
      <div>
        <h2>react Class基本用法</h2><br /><br />
        <h3>你点击了 {this.state.num} 次！</h3><br /><br />
        <button onClick={this.handChange}>点击加1</button><br /><br />
        <button onClick={this.addList}>点击增加列表</button>
        {
          this.state.list.map((value,key)=>{
            return <div key={key} dangerouslySetInnerHTML={{__html:value.title}}></div>
          })
        }
        <hr />
        {
            this.state.list.map((value,key)=>{
              return <div key={key}>{value.title}</div>
            })

        }
      </div>
     );
  }
}
 
export default Basic;